<template>
  <div>
    <!-- 头部 -->
    <Hometop @click="$router.push('./login')" />
    <!-- 关注栏 -->
    <van-tabs v-model="activeIndex">
      <van-tab
        v-for="(category)  in categorylist"
        :title="category.name"
        :key="category.id"
      >
      <!-- load是拉到底的时候触发的.每当拉到第我就把页面加一然后页面发送请求 -->
      <!-- imediate-check=false是禁止页面进来时马上发起翻页请求 -->
      <!-- v-model判断当前的翻页是不是正在等待 -->
      <!-- finished判断页面是不是翻到最后一页了,翻到最后一页的特性就是数据多少和我要求的多少比较 -->
        <van-list
          @load="loadMore"
          :immediate-check="false"
          v-model="category.loading"
          :finished="category.finished"
          finished-text="爷是有底线的"
        >
          <!-- 内容 -->
          <Postitem
            v-for="postdata in category.postdatalist"
            :postdata="postdata"
            :key="postdata.id"
          />
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Postitem from '../components/Postitem.vue'
import Hometop from "../components/Hometop.vue";
export default {
  components: {
    Hometop,
    Postitem,
  },
  data() {
    return {
      activeIndex: 0,
      categorylist: [],
    };
  },
  created() {
    this.$axios({
      url: "/category",
    }).then((res) => {
      //这是列表的文章
      // this.categorylist = res.data.data;
      //给每个分类创建一个postdatalist
      this.categorylist = res.data.data.map((item) => {
        return {
          ...item,
          postdatalist: [],
          pageIndex: 1,
          pageSize: 6,
          loading:false,
          finished:false
        };
      });
      console.log(this.categorylist);
      this.loadPost();
    });
  },
  watch: {
    //切换列表会触发这个监听器
    activeIndex() {
      if (this.categorylist[this.activeIndex].postdatalist.length == 0) {
        this.loadPost();
      }
    },
  },
  methods: {
    loadPost() {
      //当前激活列表的索引是this.activeIndex
      //当前激活列表该显示的文章应该是this.categorylist[this.activeIndex]
      const currentCategorylist = this.categorylist[this.activeIndex];
      //页面渲染之后先拿到分类才能有文章内容,不然不知道拿哪个种类的文章没有意义
      this.$axios({
        url: "/post",
        //post传数据需要用到params,而拿文章需要用到参数category,发送请求看返回的data
        params: {
          //根据当前激活的id获取当前的文章列表
          category: currentCategorylist.id,
          pageSize: currentCategorylist.pageSize,
          pageIndex: currentCategorylist.pageIndex,
        },
      }).then((res) => {
        // this.postdatalist = res.data.data;
        //因为postdatalist被加载到了categorylist的每个item下面,所以必须要currentCategorylist下面拿
        // currentCategorylist.postdatalist=res.data.data
        //利用...的形式进行拼接
        currentCategorylist.postdatalist = [
          ...currentCategorylist.postdatalist,
          ...res.data.data,
        ];
        currentCategorylist.loading = false;
        //当数据的长度小于我要求的长度时,说明数据没了,已经结束了,就把finished改成true
        if (res.data.data.length < currentCategorylist.pageSize) {
          console.log("3333");
          currentCategorylist.finished = true;
        }
      });
    },
    loadMore() {
      const currentCategorylist = this.categorylist[this.activeIndex];
      currentCategorylist.pageIndex += 1;
      this.loadPost();
    },
  },
};
</script>

<style lang="less" scoped>
van-tab {
  font-size: 30/360 * 100vw;
}
</style>